﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section scripts
{
    <script src="@Url.Content("~/Scripts/shared/share.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/shared/shown.js")" type="text/javascript"></script>
}

<link href="~/Content/css/style.css?v=1.0.0" rel="stylesheet" />
<script src="~/Scripts/echarts3.min.js"></script>
<script src="~/Scripts/common.js"></script>
<style type="text/css">
    #myChart {
        width: 100%;
        height: 100%;
    }

    #DivHeader {
        padding: 10px;
    }
</style>
<div class="mini-toolbar" style="padding: 2px; border-top: 0; border-left: 0; border-right: 0;">
    <table style="width: 100%;">
        <tr>
            <td style="width: 100%;">
                <a class="mini-button" iconcls="icon-search" onclick="LoadData" plain="true">刷新</a>
                <span class="separator"></span>
                <a class="mini-button" iconcls="icon-goto" onclick="clearloca" plain="true">重置</a>
                <span class="separator"></span>
                <a class="mini-button" iconcls="icon-close" onclick="CloseWindow" plain="true">关闭</a>
            </td>
        </tr>
    </table>
</div>
<div id="DivHeader">
    <table>
        <tr>
            <td width="70px" align="right">商户名称：</td>
            <td width="190px">
                @Html.Partial("~/Views/Modular/LookupCorpInfo.cshtml")
            </td>
            <td class="style18">
                <input id="dateType" name="dateType" class="mini-combobox" style="width: 100px;" value="0" shownullitem="false"
                    required="true" allowinput="false" align="left" data="date1" />
            </td>
        </tr>
    </table>
</div>
<div id="myChart"></div>
<script type="text/javascript">
    var date1 = [
        { "id": "0", "text": "按开卡门店" },
        { "id": "1", "text": "按等级" },
        { "id": "2", "text": "按年龄段" }
    ];
    mini.parse();

    function FormShown() {

    }

    function clearloca() {
        mini.getbyName("FCorpName").setValue("");
        mini.getbyName("FCorpItemID").setValue("");
        mini.getbyName("FCorpItemID").setText("");
        mini.getbyName("dateType").setValue(0);
    }

    var myChart = echarts.init(document.getElementById('myChart'));
    var option = {
        title: {
            text: '会员分析(会员数)',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: []
        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: '80%',
                center: ['50%', '50%'],
                hoverAnimation: false, //去掉鼠标悬浮放大效果
                data: [],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart.setOption(option);

    function LoadData() {
        var param = {
            mSystemAppID: parent.window.getSystemAppID(),
            FCorpID: mini.getbyName("FCorpItemID").getValue(),
            DataType: mini.getbyName("dateType").getValue()
        }
        postRequest('/Member/GetMemberAnalyze', param, function (res) {
            if (res.status == 1) {
                var name = [];
                var memberNum = [];
                var title = '';
                var dataType = mini.get('dateType').getValue();
                if (dataType == 0) {
                    title = '会员分析(会员数) - 开卡门店';
                } else if (dataType == 1) {
                    title = '会员分析(会员数) - 等级';
                } else if (dataType == 2) {
                    title = '会员分析(会员数) - 年龄段';
                }
                for (var i = 0; i < res.data.length; i++) {
                    name.push(res.data[i].FName);
                    var data = {
                        name: res.data[i].FName,
                        value: res.data[i].FMemberNum
                    }
                    memberNum.push(data);
                }
                myChart.setOption({
                    title: { text: title },
                    legend: {
                        data: name
                    },
                    series: {
                        name: title,
                        data: memberNum
                    }
                });
            }
        });
    }

    LoadData();
</script>
